<template>
	<view class="container">
		<image class="index-bg" :src="imgUrl + '/banner.png'" mode="widthFix"></image>
		<u-navbar title="住户登记" autoBack safeAreaInsetTop fixed bgColor="transparent" titleStyle="color: #ffffff;" leftIconSize="40" leftIconColor="#ffffff"></u-navbar>
		<view class="content">
			<view class="steps">
				<view class="step"><text>1 填写有效信息</text></view>
				<view class="step"><text>2 等待审核 (个人中心-申请记录可查看)</text></view>
			</view>
			<view class="form">
				<u--form :model="formData" :rules="rules" ref="form">
					<view class="form-item">
						<view class="form-item-title">个人信息</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="residentName">
								<u--input border="none" v-model="formData.residentName" clearable placeholder="姓名" shape="circle"></u--input>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="phone">
								<u--input border="none" v-model="formData.phone" clearable placeholder="手机号码" shape="circle" type="digit"></u--input>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="idCard">
								<u--input border="none" v-model="formData.idCard" clearable placeholder="身份证号码" shape="circle" type="idcard"></u--input>
							</u-form-item>
						</view>
					</view>

					<view class="form-item">
						<view class="form-item-title">住宅单元</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="region">
								<u-input border="none" :value="formData.region" clearable placeholder="楼盘信息(数据自动填写)" shape="circle">
								</u-input>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="address">
								<u-input border="none" v-model="formData.address" clearable placeholder="详细地址(例如**栋**号**)" shape="circle">
								</u-input>
							</u-form-item>
						</view>
					</view>

					<!-- <view class="form-item">
						<view class="form-item-title">身份信息</view>
						<view class="idcards">
							<u-upload width="300" height="180" name="idcardFront" @afterRead="afterRead" :fileList="idcardFront" @delete="deletePic" previewFullImage>
								<image
									v-if="!idcardFront[0].url"
									style="width: 150px;height: 90px;"
									src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
									mode="widthFix"
								></image>
							</u-upload>
							<u-upload widt h="300" height="180" name="idcardBack" @afterRead="afterRead" :fileList="idcardBack" @delete="deletePic" previewFullImage>
								<image
									v-if="!idcardBack[0].url"
									style="width: 150px;height: 90px;"
									src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
									mode="widthFix"
								></image>
							</u-upload>
						</view>
					</view> -->
				</u--form>
			</view>

			<view class="statusbar"></view>
		</view>
		<view class="btn"><u-button @click="$u.debounce(submit, 300)" shape="circle" :loading="loading" type="primary" text="提交表单"></u-button></view>
	</view>
</template>

<script>
export default {
	name: 'register',
	data() {
		return {
			imgUrl: '',
			formData: {
				residentName: 'mako',
				phone: '17722330090',
				idCard: '440782199504116552',
				areaId: 1,
				// areaName
				buildingId: 1,
				// buildingName
				floor: 1,
				roomId: 1,
				// roomName
			},
			region: [],
			// 身份证信息
			idcardFront: [],
			idcardBack: [],

			rules: {
				residentName: {
					type: 'string',
					required: true,
					message: '请填写真实的姓名',
					trigger: ['blur', 'change']
				},
				phone: {
					type: 'string',
					required: true,
					message: '请填写有效的手机号码',
					trigger: ['blur', 'change'],
					pattern: /^1[3456789]\d{9}$/
				},
				// idcard: {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写有效的身份证号码',
				// 	trigger: ['blur', 'change'],
				// 	pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				// },
				// region: {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请选择省市区',
				// 	trigger: ['blur', 'change']
				// },
				// address: {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写的详细地址信息',
				// 	trigger: ['blur', 'change']
				// }
			}
		};
	},
	onLoad() {
		this.imgUrl = this.resBaseUrl;
		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// this.menuButtonInfo = menuButtonInfo;
		// console.log(menuButtonInfo);
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		getLocation() {
			return new Promise((resolve, reject) => {
				uni.getLocation({
					success() {
						resolve(true);
					},
					fail(err) {
						console.log(err)
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.userLocation']) {
									uni.openSetting();
								}
							}
						});
						reject(false);
					}
				});
			});
		},
		onMap() {
			var that = this
			this.getLocation().then(res => {
				uni.chooseLocation({
					success(res) {
						// console.log('位置名称:' + res.name);
						that.formData.address = res.address
						// console.log('纬度:' + res.latitude);
						// console.log('经度:' + res.longitude);
					},
					fail(err) {
						console.log(err);
					}
				});
			});
		},
		bindRegion(e) {
			this.formData.region = e.detail.value.join('-');
		},
		// 新增图片
		async afterRead(event) {
			// console.log(event);
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[event.name].length;
			lists.map(item => {
				this[event.name].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				// const result = await this.uploadFilePromise(lists[i].url);
				let item = this[event.name][fileListLen];
				this[event.name].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: ''
						// url: result
					})
				);
				fileListLen++;
			}
		},
		// 删除图片
		deletePic(event) {
			console.log(event);
			this[event.name].splice(event.index, 1);
		},
		submit(e) {
			var that = this;
			this.$refs.form.validate().then(res => {
				// uni.$u.route({
				// 	type: 'redirectTo',
				// 	url: '/pages/manage/result'
				// });
				this.$api.residentInsert(this.formData).then(res => {

				})
			});
		}
	}
};
</script>
<style scoped>
/deep/.u-upload__wrap {
	justify-content: center;
}
</style>
<style lang="scss" scoped>
.container {
	position: relative;
	.index-bg {
		// position: fixed;
		// left: 0;
		// top: 0;
		width: 100%;
		height: 422rpx;
	}
	.content {
		z-index: 11;
		width: 100%;
		position: absolute;
		top: 240rpx;
		left: 0;
		.steps {
			display: flex;
			flex-direction: column;
			color: #fff;
			padding: 0 32rpx;
			.step {
				display: flex;
				margin-bottom: 10rpx;
				text {
					font-size: 24rpx;
					height: 44rpx;
					line-height: 44rpx;
					background-color: #186bfc;
					border-radius: 22rpx;
					padding: 0 16rpx;
				}
			}
		}
		.form {
			.form-item {
				margin-top: 32rpx;
				padding: 0 32rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.idcards {
					display: flex;
					justify-content: space-between;
					padding-bottom: 32rpx;
				}
				.form-item-title {
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					padding: 20rpx 0;
				}
				.form-item-input {
					min-height: 60px;
				}
			}
			.input-right-icon {
				margin-left: 20rpx;
			}
		}
		.statusbar {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 120rpx);
		}
	}
	.btn {
		z-index: 22;
		position: fixed;
		width: 688rpx;
		left: 50%;
		transform: translateX(-50%);
		bottom: env(safe-area-inset-bottom);
	}
}
</style>
